<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style type="text/css">
    #div_id_one {
        background-color: green;
        width: 500px;
        height: 500px;
        border: 2px solid #000;
    }
    
    #div_id_two {
        width: 350px;
        height: 350px;
        background-color: red;
    }
    
    #div_id_three {
        width: 200px;
        height: 200px;
        background-color: rosybrown;
    }
    
    #div_id_four {
        width: 70px;
        height: 70px;
        background-color: darkslategray;
    }
    
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <!-- 4.制作4个嵌套DIV ，要求：
		1.每个父DIV尺寸必须大于子DIV
		2.实现每个DIV在父DIV正中间
		3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
		4.通过最底层DIV，打印每层父DIV，如：
		1级父元素为（），1级父节点为（）
		2级父元素为（），2级父节点为（）
		....
		5.查找每个DIV的子元素和子对象 -->

    <div id="div_id_one">
        <span>div_id_one_span</span>
        <div id="div_id_two">
            <p>div_id_one_p</p>
            <button id="b_console_log_children">打印每层子DIV</button>
            <div id="div_id_three">
                <a>div_id_one_a</a>
                <button id="b_console_log_parent">打印每层父DIV</button>
                <div id="div_id_four">
                    <img src="img/pic.jpg" style="width: 70px; height: 70px;">
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    function getParent() {
        console.log("S 打印每层父DIV ")
        console.log("1级父元素为")
        console.log(document.getElementById("div_id_four").parentElement);
        console.log("1级父节点为")
        console.log(document.getElementById("div_id_four").parentNode);

        console.log("2级父元素为")
        console.log(document.getElementById("div_id_four").parentElement.parentElement);
        console.log("2级父节点为")
        console.log(document.getElementById("div_id_four").parentNode.parentNode);

        console.log("3级父元素为")
        console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement);
        console.log("3级父节点为")
        console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode);

        console.log("4级父元素为")
        console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement);
        console.log("4级父节点为")
        console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode);

        console.log("5级父元素为")
        console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement);
        console.log("5级父节点为")
        console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode);

        console.log("6级父元素为")
        console.log(document.getElementById("div_id_four").parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
        console.log("6级父节点为")
        console.log(document.getElementById("div_id_four").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);

        console.log("E 打印每层父DIV ")
    }
    document.getElementById("b_console_log_parent").onclick = getParent;

    function getChildren() {
        console.log("S 打印每层子DIV ")
        console.log("div_id_one级子元素为")
        console.log(document.getElementById("div_id_one").children);
        console.log("div_id_one级子节点为")
        console.log(document.getElementById("div_id_one").childNodes);
        console.log("div_id_two级子元素为")
        console.log(document.getElementById("div_id_two").children);
        console.log("div_id_two级子节点为")
        console.log(document.getElementById("div_id_two").childNodes);
        console.log("div_id_three级子元素为")
        console.log(document.getElementById("div_id_three").children);
        console.log("div_id_three级子节点为")
        console.log(document.getElementById("div_id_three").childNodes);
        console.log("div_id_four级子元素为")
        console.log(document.getElementById("div_id_four").children);
        console.log("div_id_four级子节点为")
        console.log(document.getElementById("div_id_four").childNodes);
        console.log("E 打印每层子DIV ")
    }
    document.getElementById("b_console_log_children").onclick = getChildren;
</script>

</html>